<template>
    <view class="Wrapper">
        <!-- isTabbar -->
        <navBar title="服务列表" :bgColor="bgColor" :color="color"></navBar>
        <bannel></bannel>
        <view class="allUpList">
            <scroll-view scroll-x="true" class="scrollView nowrap" @scroll="handleScroll" show-scrollbar="false" :scroll-with-animation="true" :enhanced="true" :scroll-left="scrollLeft">
                <view class="list" @click="toList(item)" :class="listCount" v-for="(item, index) in pageData" :key="index">
                    <view class="box">
                        <image :src="$imgUrls(item.classify_img)" mode="aspectFill" class="classify_img"></image>
                        <text class="classify_name">{{ item.classify_name }}</text>
                    </view>
                </view>
            </scroll-view>
            <view class="line" v-if="pageData.length > 4">
                <view class="linFix" :style="{ left: linePosition + '%' }"></view>
            </view>
        </view>

        <List :topping="1"></List>
    </view>
</template>

<script>
    import bannel from '@/zunyi/components/bannel.vue';
    import List from '@/zunyi/components/List.vue';
    export default {
        components: {
            bannel,
            List
        },
        data() {
            return {
                bgColor: 'transparent',
                color: '#fff',
                pageData: [],
                scrollLeft: 0,
                linePosition: 0,
                maxScroll: 0,
                viewWidth: 0,
                isInitialized: false // 添加初始化标志
            };
        },
        mounted() {
            // 等待数据加载完成后再初始化
            this.$nextTick(() => {
                this.initScrollView();
            });
        },
        watch: {
            // 监听数据变化，重新初始化
            pageData: {
                handler(newVal) {
                    if (newVal.length && !this.isInitialized) {
                        this.$nextTick(() => {
                            this.initScrollView();
                            this.isInitialized = true;
                        });
                    }
                },
                immediate: true
            }
        },
        onLoad() {
            this.allUpList();
        },
        methods: {
            allUpList() {
                this.$http
                    .get({
                        url: '/singleSaleApi/allUpList',
                        data: {
                            classify_cate: 5
                        }
                    })
                    .then((res) => {
                        if (res.errcode != '100') return this.$Toast(res.msg);
                        const result = res.data || [];
                        this.pageData = result;
                    });
            },
            initScrollView() {
                // 添加延时确保DOM已经渲染
                setTimeout(() => {
                    const query = uni.createSelectorQuery();
                    query
                        .select('.scrollView')
                        .boundingClientRect()
                        .exec((data) => {
                            if (!data || !data[0]) return;
                            this.viewWidth = data[0].width;

                            const contentQuery = uni.createSelectorQuery();
                            contentQuery
                                .select('.scrollView')
                                .scrollOffset()
                                .exec((res) => {
                                    if (!res || !res[0]) return;
                                    this.maxScroll = res[0].scrollWidth - this.viewWidth;
                                });
                        });
                }, 300);
            },
            handleScroll(e) {
                // console.log('maxScroll:', this.maxScroll);
                // console.log('scrollLeft:', e.detail.scrollLeft);
                if (!this.maxScroll) return; // 如果maxScroll未初始化则返回

                const scrollLeft = e.detail.scrollLeft;
                // 计算百分比，考虑到linFix的宽度是50%，最大移动范围应该是50%
                const percentage = Math.max(0, Math.min(50, (scrollLeft / this.maxScroll) * 50));

                setTimeout(() => {
                    this.linePosition = percentage;
                }, 0);
            },
            toList(Item) {
                this.toUrl(`/zunyi/List?classify_id=${Item.classify_id}&title=${Item.name}`);
            }
        },
        onPageScroll(event) {
            if (event.scrollTop >= 45) {
                this.bgColor = '#fff';
                this.color = '#000';
                uni.setNavigationBarColor({
                    frontColor: '#000000',
                    backgroundColor: '#000000'
                });
            } else {
                this.bgColor = 'transparent';
                this.color = '#fff';
                uni.setNavigationBarColor({
                    frontColor: '#ffffff',
                    backgroundColor: '#ffffff'
                });
            }
        },
        computed: {
            listCount() {
                if (!this.pageData.length) return;
                const count = this.pageData.length;
                switch (count) {
                    case 2:
                        return 'w-50';
                        break;
                    case 3:
                        return 'w-333';
                        break;
                    default:
                        return 'w-25';
                }
            }
        }
    };
</script>

<style lang="scss">
    page {
        width: 100%;
        background-color: #f8f8f8;
        padding-bottom: 40rpx;
    }
</style>
<style lang="scss" scoped>
    .Wrapper {
        background: linear-gradient(180deg, #28adf2 0%, #ffffff 25%, #f8f8f8 36%, #f8f8f8 100%);
    }
    .allUpList {
        width: 100%;
        margin-top: 30rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .scrollView {
            width: 100%;
            box-sizing: border-box;
            white-space: nowrap; // 确保内容不换行

            .list {
                // width: 25%;
                height: 100%;
                padding: 20rpx 0;
                display: inline-block;
                .box {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    .classify_img {
                        width: 56rpx;
                        height: 56rpx;
                    }
                    .classify_name {
                        color: #333;
                        font-size: 26rpx;
                        margin-top: 10rpx;
                    }
                }
            }
        }
        .line {
            width: 140rpx;
            height: 10rpx;
            background-color: #f2f0f0;
            margin-top: 20rpx;
            position: relative;
            overflow: hidden; // 添加overflow:hidden确保不会超出
            .linFix {
                width: 50%;
                height: 100%;
                background-color: #67a9c9;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 10;
                transition: left 0.1s linear;
            }
        }
    }
</style>
